.bgck{
    width: 100%;
    & > img{
        width: 100%;
        object-fit:cover;
    }
}

.ABOUT{
    .about{
        display: flex;
        flex-wrap: wrap;
        background-color: #f3f3f3;
        
        .about-cont{
            width: 50%;
            & > img{
                width: 100%;
            }
            .about-one{
                width: 80%;
                margin: 50px auto 0;
                .title{
                    font-size: 35px;
                    margin-top: 0;
                    margin-bottom: 13px;
                    text-align: left;
                    color: #333333;
                    font-weight: bold;
                }
                .head{
                    font-size:20px;
                    color: #666666;
                    margin-bottom: 47px;
                    background-color: #f3f3f3;
                }
                .body{
                    font-size: 20px;
                    color: #333333;
                    
                }
            }
        }
        
    }
}

.SCOPE{
    width: 100%;
    & > img{
        width: 100%;
    }
    .cont{
        width: 90%;
        margin: 0 auto;
        padding-top: 28px;
        padding-bottom: 65px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: #f4f4f4;
        position: relative;
        top: -39px;
        .cont-list{
            width: 30%;
            position: relative;
            & > img{
                width: 100%;
            }
            .hoverText{
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.3);
                opacity: 0;
                transform: translateY(-50%);
                text-align: center;
                color: #fff;
                position: absolute;
                top: 50%;
                transition: all 0.3s;
                .one{
                    margin-top: 50%;
                    font-size: 39px;
                    font-weight: bold;
                    margin-bottom: 20px;
                }
            }
        }
        .text{
            width: 80%;
            text-align: center;
            font-size: 20px;
            color: #333333;
            margin-top: 60px;
        }
        .cont-list:hover{
            .hoverText{
                opacity: 1;
            }
        }
    }
}

.STAFF{
    .cont-head{
        width: 75%;
        margin: 0 auto;
        text-align: center;
        font-size: 18px;
        color: #000;
    }
    .cont-body{
        margin: 77px auto 0;
        width: 80%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .list{
            position: relative;
            width: 45%;
            overflow: hidden;
            .hoverText{
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.3);
                opacity: 0;
                transform: translateY(-50%);
                text-align: center;
                color: #fff;
                position: absolute;
                top: 50%;
                transition: all 0.3s;
                .one{
                    margin-top: 30%;
                    font-size: 39px;
                    font-weight: bold;
                    margin-bottom: 20px;
                }
            }
        }
        .list:hover{
            .hoverText{
                opacity: 1;
            }
        }
        .list-big{
            margin-top: 20px;
            width: 75%;
            & > img{
                width: 100%;
            }
        }
        
        
    }
}

.CASE{
    .case-bar{
        & > ul{
            display: flex;
            list-style: none;
            width: 60%;
            margin: 0 auto 59px;
            font-size: 29px;
            color: #666666;
            justify-content: space-between;
            font-weight: bold;
            .active{
                color: #ffb119;
            }
        }
    }
    .caseCont{
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-auto-flow: row dense;
        grid-gap: 20px;
        grid-template-areas: 'a b'
                             'a d'
                             'c d';
        .img1{
            width: 100%;
            grid-area:a
        }
        .img2{
            width: 100%;
            grid-area:b
        }
        .img3{
            width: 100%;
            grid-area:c
        }
        .img4{
            width: 100%;
            grid-area:d
        }
    }
}

.INFORMATION{
    .lists{
        width: 80%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        position: relative;
        .list{
            box-sizing: border-box;
            border: 1px solid #bbb;
            width: 30%;
            position: relative;
            margin-bottom: 158px;
            box-shadow: 5px 5px 15px 1px #bbb;
            & > img{
                width: 100%;
            }
            .title{
                width: 100%;
                margin-bottom: 0;
                text-align: center;
                font-size: 23px;
                font-weight: bold;
                background-color: rgba(0,0,0,0.3);
                color: white;
                position: absolute;
                bottom: 0;
            }
            
        }
        .left,.right{
                
            font-size: 40px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            background-color: #ababab;
            color: white;
        }
        .left{
            width: 50px;
            height: 50px;
            position: absolute;
            left: -10%;
            top: 50%;
            transform: translateY(-50%);
            
        }
        .right{
        width: 50px;
        height: 50px;
        position: absolute;
        
        right: -10%;
        top: 50%;
        transform: translateY(-50%);
        }
    }
}
.footer{
    background-color: #2a2d32;
    padding-top: 25px;
    color: white;
    & > ul{
        margin: 0 auto 0;
        width: 60%;
        list-style: none;
        display: flex;
        justify-content: space-around
        
    }
}